<template>
  <div class="root">
    <div class="remark">
      <div v-show="isEdit">
        <el-button type="primary" size="mini" icon="el-icon-edit" plain @click="showEditComment">编辑评论</el-button>
        <!--<avue-ueditor v-model="content.feedback"-->
        <!--              v-bind="options"></avue-ueditor>-->
      </div>
      <div v-html="content.feedback"></div>
    </div>
    <div class="creative" @click="$emit('click-creative', content)">
      <video
        v-if="content.type === 1 "
        style="width: 600px; height: 600px"
      >
        <source :src="content.creativeUrl">
      </video>
      <el-image
        v-else
        style="width: 600px; height: 600px"
        :src="content.creativeUrl"
        :fit="'cover'">
      </el-image>
    </div>
    <table border="1" width="600px" style="margin-top: 10px">
      <tr>
        <td colspan="2">素材名：{{ content.creativeName }}</td>
        <td colspan="4">素材ID：{{ content.shortId }}</td>
      </tr>
      <tr>
        <td>花费</td>
        <td>曝光</td>
        <td>点击</td>
        <td>CTR</td>
        <td>安装</td>
        <td>CVR</td>
      </tr>
      <tr>
        <td>{{ content.spend }}</td>
        <td>{{ content.impressions | thousandSeparator }}</td>
        <td>{{ content.clicks | thousandSeparator }}</td>
        <td>{{ content.ctr }}</td>
        <td>{{ content.install | thousandSeparator }}</td>
        <td>{{ content.cvr }}</td>
      </tr>
    </table>
    <div class="delete-btn" v-if="isEdit" @click="$emit('remove', content)"><i class="el-icon-delete"></i></div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="800px"
      :append-to-body="true"
    >
      <!--<avue-ueditor v-model="text"-->
      <!--              v-bind="options"></avue-ueditor>-->
      <quill-editor style="height: 180px;" v-model="text" :options="editorOptions"></quill-editor>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitComment">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CreativeCell",
  props: {
    content: {
      type: Object,
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      options: {
        oss: 'qiniu',
        customConfig: {},//wangEditor编辑的配置
        qiniu: {
          AK: "4K8rpbd6szJZXszowt741vofKRLlMjkgwYAVhfJt",
          SK: "UAb4L4S-QdTVWumrMHL2uapKtPgsr_-_IstlydVb",
          scope: "",
          url: "image-origin-bucket.ninesword.com",
          deadline: 1
        }
      },
      editorOptions: {
        placeholder: '请输入内容',
        modules: {
          toolbar: {
            container: [['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{header: 1}, {header: 2}], // 1、2 级标题
              [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
              [{script: 'sub'}, {script: 'super'}], // 上标/下标
              [{indent: '-1'}, {indent: '+1'}], // 缩进
              [{direction: 'rtl'}], // 文本方向
              // [{size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']}], // 字体大小
              // [{header: [1, 2, 3, 4, 5, 6]}], // 标题
              // [{color: []}, {background: []}], // 字体颜色、字体背景颜色
              // // [{ font: ['songti'] }], // 字体种类
              // [{align: []}], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ]
          }
        },
      },
      dialogVisible: false,
      text: ''
    }
  },
  methods: {
    // dialogType(val) {
    //   let type;
    //   let urlTail = val.split(".")[val.split(".").length - 1];
    //   let imgList = ["jpg", "jpeg", "png", "gif", "bmp"];
    //   let videoList = ["mp4", "mov", "avi", "mp3", "ogg", "rmvb", "mkv"];
    //   if (imgList.includes(urlTail)) {
    //     type = "image";
    //   } else if (videoList.includes(urlTail)) {
    //     type = "video";
    //   }
    //   return type;
    // }
    showEditComment() {
      this.dialogVisible = true
      this.text = this.content.feedback
    },
    submitComment() {
      this.dialogVisible = false
      this.content.feedback = this.text
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  position: relative;
  padding: 50px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);

  .remark {
    width: 800px;
    //display: block;
    //border: 1px solid #333333;
    margin-bottom: 10px;
  }

  .delete-btn {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>
